<template>
  <div class="app-container">
    <div class="app-container-inner personCenter">
      <el-descriptions title="个人中心" :column="1" border>
        <el-descriptions-item
          :label="item.lable"
          v-for="item in noTaglist"
          :key="item.lable"
          label-align="right"
        >
          {{ item.value }}
        </el-descriptions-item>
        <el-descriptions-item
          :label="item.lable"
          v-for="item in taglist"
          :key="item.lable"
          label-align="right"
        >
          <el-tag size="small">{{ item.value }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>
<script setup lang="ts">
  const roleInfo = ref([
    {
      lable: '登录账号',
      value: '12345678901',
    },
    {
      lable: '用户名称',
      value: 'wangtao',
    },
    {
      lable: '手机号码',
      value: '18774243664',
    },
    {
      lable: '安全邮箱',
      value: 'wangtao@allinpayintl.com',
    },
    {
      lable: '用户角色',
      value: '管理员',
    },
    {
      lable: '授权角色',
      value: '超级VIP',
    },
    {
      lable: '密码管理',
      value: '暂无管理',
    },
    {
      lable: '推荐码',
      value: '生成',
    },
    {
      lable: '推荐二维码',
      value: '生成',
    },
  ])
  const noTaglist = roleInfo.value.filter(
    (item) => item.lable !== '推荐码' && item.lable !== '推荐二维码',
  )
  const taglist = roleInfo.value.filter(
    (item) => item.lable === '推荐码' || item.lable === '推荐二维码',
  )
</script>

<style scoped scss="lang">
  .personCenter {
    display: flex;
    justify-content: center;
    padding: 50px 0;
  }
  :deep(.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell) {
    border: var(--el-descriptions-table-border);
    padding: 8px 11px;
    width: 130px !important;
  }
  .el-descriptions.el-descriptions--default {
    width: 600px;
    box-shadow: 4px 5px 21px rgba(1.1, 3.2, 3.3);
    padding: 25px;
    border-radius: 25px;
  }
</style>
